<template>
    <div class="cart">
        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
                <th>
                    <input type="checkbox" v-model="allChecked" @change="allChange()">
                </th>
                <th>
                    名称
                </th>
                <th>
                    价格
                </th>
                <th>
                    数量
                </th>
                <th>
                    小计
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr v-for="(item,index) in cartList" :key="item.id">
                <td>
                    <input type="checkbox" @change="oneChange()" v-model="item.checked">
                </td>
                <td>
                    {{ item.title }}
                </td>
                <td>
                    {{ item.price }}
                </td>
                <td>
                    <button :disabled="item.number<=1" @click="item.number--">
                        -
                    </button>
                    X {{ item.number }}
                    <button @click="item.number++">
                        +
                    </button>
                </td>
                <td>
                    {{ (item.price * item.number).toFixed(2) }}
                </td>
                <td>
                    <button @click="del(index)">
                        删除
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    总价
                </td>
                <td colspan="5">
                    {{ countPrice }}
                </td>
            </tr>
        </table>
    </div>
</template>
<script setup>
    /* 
        全选反选  加减 添加 删除 计算总价
        双向绑定  v-model
        遍历      v-for
        属性绑定   v-bind
        计算属性   computed
        事件绑定   @ / v-on
    */
    // 引入 ref computed
    import {ref,computed} from 'vue';
    // 全选状态
    const allChecked = ref(false)
    // 创建数据
    const cartList = ref([
        {
            title: '电脑',
            price: 9800,
            number: 1,
            id: 1,
            checked: false
        },
        {
            title: '手机',
            price: 4800,
            number: 3,
            id: 2,
            checked: false
        },
        {
            title: '键盘',
            price: 98000,
            number: 3,
            id: 3,
            checked: false
        },
        {
            title: '鼠标',
            price: 9.9,
            number: 4,
            id: 4,
            checked: false
        }
    ])

    // 全选按钮改变事件
    function allChange(){
        // console.log(allChecked.value);
        // 遍历cartList
        cartList.value.forEach(item => item.checked = allChecked.value);
    }

    //单个状态 判断 全选状态
    function oneChange(){
        // console.log(12);
        allChecked.value = cartList.value.every(item => item.checked == true)
    }

    // 单个按钮删除
    function del(index){
        // console.log(index);
        // 删除单个数据
        cartList.value.splice(index,1)
    }

    // 使用计算属性计算总价
    const countPrice = computed(() => {
        // 计算总价
        let count = 0;
        // 遍历
        cartList.value.forEach(item => {
            // 判断是否选中
            if(item.checked){
                count += item.price * item.number
            }
        })
        // 最后计算的价格返回出去
        return count.toFixed(2)
    })
    // 给字符串原型链加上tofixed方法
    String.prototype.toFixed = function (value){
        // console.log(this);
        
        let number = Number(this.replace(/[^0-9]/g,''));
        return number.toFixed(value)
    }   
    console.log(
        "98ABC98abc".toFixed(2)
    );
    // 原型链
    // console.log(String);
    // const countPrice = computed({
        // getters
    //     get(){
    //         // 计算总价
    //         let count = 0;
    //         // 遍历
    //         cartList.value.forEach(item => {
    //             // 判断是否选中
    //             if(item.checked){
    //                 count += item.price * item.number
    //             }
    //         })
    //         // 最后计算的价格返回出去
    //         return count.toFixed(2)
    //     },
        // setters
    //     set(value){

    //     }
    // })
</script>